## -*- coding: utf-8 -*-
<%inherit file="base.mak" />

<%def name="content()">

<a href="/">${_('Return to home page.')}</a>

<p>${_('This page shows the current location of your device.')}</p>

<h2>${_('Device Information')}</h2>
<b>${_('Unique ID')}:</b> <a href="/track/device/${c.device.id}/">${c.device.device_uid} (${hex(int(c.device.device_uid))})</a> <br/>

% if c.no_location:

<p>${_("The device hasn't reported any locations yet.")}</p>

% else:

<h2>${_('Current Location')}</h2>

<b>${_('Latitude')}</b>: ${c.location.latitude}, <b>${_('Longitude')}</b>: ${c.location.longitude} <br/>
<b>${_('Altitude')}</b>: ${c.location.altitude} ${_('meters')} <br/>
<b>${_('Speed')}</b>: ${c.location.speed} ${_('meters/second')} <br/>
<b>${_('Heading')}</b>: ${h.get_heading(c.location.heading)}, ${c.location.heading} ${_('degrees')} <br/>
<b>${_('Date')}</b>: ${c.location.date} UTC <br/> <br/>

<a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q=${c.location.latitude},${c.location.longitude}&ie=UTF8&z=16&iwloc=addr">${_('View this location in Google Maps')}</a>


    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAArb_T3QZnZy_qXbAx1DARsBQkCTHEp5wGd29mZk9UXlnNkwg4gxTH3wSIV4ncWVuKU75KDziGaDumSQ"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[
    var map = null;
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(${c.location.latitude}, ${c.location.longitude}), 13);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

      }
    }

    
    //]]>
    </script>
    <div id="map" style="width: 500px; height: 300px"></div>
<script>load();

var marker = new GMarker(new GLatLng(${c.location.latitude}, ${c.location.longitude}));
map.addOverlay(marker);
</script>
% endif

</%def>